<template>
  <div class="app-container">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>客户管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-row style="position: absolute;right: 70px;z-index: 99;margin-top: -8px;">
       <el-input placeholder="输入客户手机号账号查询"  class="input-with-select">
         <el-button slot="append" icon="el-icon-search"></el-button>
       </el-input>
      </el-row>
      <el-tabs v-model="message" @tab-click="onUserList">
        <el-tab-pane :label="`普通用户(${unread.length})`" name="first">
          <el-table :data="users" highlight-current-row style="width: 100%;">
            <el-table-column prop="nnn" label="用户ID" width="140">
            </el-table-column>
            <el-table-column prop="time" label="注册时间" width="170">
            </el-table-column>
            <el-table-column prop="name" label="用户头像" width="120">
              <template slot-scope="scope">
                <img  :src="scope.row.img" alt="" style="width: 50px;height: 50px">
              </template>
            </el-table-column>
            <el-table-column prop="name" label="用户名称" width="150">
            </el-table-column>
            <el-table-column prop="phone" label="账号" width="150">
            </el-table-column>
            <el-table-column prop="name" label="消费总金额" width="140">
            </el-table-column>
            <el-table-column prop="nnn" label="总下单次数(单)" width="150">
            </el-table-column>
            <el-table-column prop="nnn" label="账号级别" width="140">
            </el-table-column>
            <el-table-column prop="shopId" label="积分总额" width="140">
            </el-table-column>
            <el-table-column prop="shopId" label="账号状态" min-width="140">
            </el-table-column>
            <el-table-column label="操作" width="130">
              <template slot-scope="scope">
                <el-button type="danger" size="mini" @click="dialogFormVisible = true">维护</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane :label="`会员用户(${read.length})`" name="second">
          <el-table :data="users" highlight-current-row style="width: 100%;">
            <el-table-column prop="nnn" label="用户ID" width="140">
            </el-table-column>
            <el-table-column prop="time" label="注册时间" width="170">
            </el-table-column>
            <el-table-column prop="time" label="会员到期时间" width="170">
            </el-table-column>
            <el-table-column prop="name" label="用户头像" width="120">
              <template slot-scope="scope">
                <img  :src="scope.row.img" alt="" style="width: 50px;height: 50px">
              </template>
            </el-table-column>
            <el-table-column prop="name" label="用户名称" width="150">
            </el-table-column>
            <el-table-column prop="phone" label="账号" width="150">
            </el-table-column>
            <el-table-column prop="name" label="消费总金额" width="140">
            </el-table-column>
            <el-table-column prop="nnn" label="总下单次数(单)" width="150">
            </el-table-column>
            <el-table-column prop="nnn" label="账号级别" width="140">
            </el-table-column>
            <el-table-column prop="shopId" label="积分总额" width="140">
            </el-table-column>
            <el-table-column prop="shopId" label="账号状态" min-width="140">
            </el-table-column>
            <el-table-column label="操作" width="130">
              <template slot-scope="scope">
                <el-button type="danger" size="mini" @click="dialogFormVisible = true">维护</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane :label="`团长列表(${recycle.length})`" name="third">
          <el-table :data="users" highlight-current-row style="width: 100%;">
            <el-table-column prop="nnn" label="用户ID" width="140">
            </el-table-column>
            <el-table-column prop="time" label="申请通过时间" width="180">
            </el-table-column>
            <el-table-column prop="name" label="团员数量" width="150">
            </el-table-column>
            <el-table-column prop="name" label="用户头像" width="120">
              <template slot-scope="scope">
                <img  :src="scope.row.img" alt="" style="width: 50px;height: 50px">
              </template>
            </el-table-column>
            <el-table-column prop="name" label="用户名称" width="150">
            </el-table-column>
            <el-table-column prop="phone" label="账号" width="150">
            </el-table-column>
            <el-table-column prop="name" label="消费总金额" width="140">
            </el-table-column>
            <el-table-column prop="nnn" label="总下单次数(单)" width="150">
            </el-table-column>
            <el-table-column prop="nnn" label="账户总余额" width="140">
            </el-table-column>
            <el-table-column prop="shopId" label="可提现金额" width="140">
            </el-table-column>
            <el-table-column prop="shopId" label="上月订单量" width="140">
            </el-table-column>
            <el-table-column prop="shopId" label="本月订单量" width="140">
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 维护弹出表单 -->
         <el-dialog title="用户状态维护" :visible.sync="dialogFormVisible">
           <el-form :model="form">
             <el-form-item label="账号状态" :label-width="formLabelWidth">
              <el-radio-group v-model="form.value">
                <el-radio :label="3">{{form.value}}</el-radio>
                <el-radio :label="6">冻结</el-radio>
              </el-radio-group>
             </el-form-item>
             <el-form-item label="账号级别" :label-width="formLabelWidth">
              <el-radio-group v-model="form.value1">
                <el-radio :label="3">普通用户</el-radio>
                <el-radio :label="6">会员用户</el-radio>
              </el-radio-group>
             </el-form-item>
             <el-form-item label="账号时限" :label-width="formLabelWidth">
              <el-radio-group v-model="form.value2">
                <el-radio :label="3">永久</el-radio>
                <el-radio :label="6">限时</el-radio>
              </el-radio-group>
             </el-form-item>
           </el-form>
           <div slot="footer" class="dialog-footer">
             <el-button @click="dialogFormVisible = false">取 消</el-button>
             <el-button type="primary" @click="dialogFormVisible = false">保存</el-button>
           </div>
         </el-dialog>


        <el-col :span="24" class="toolbar">
          <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
        </el-pagination>
        </el-col>
      </el-tabs>
    </div>
    <div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: 'first',
        unread: [{}, {}],
        read: [{}],
        recycle: [{}],
        users: [],
        total: 0,
        form: {
          value: 3,
          value1: 3,
          value2: 3
        },
        formLabelWidth: '120px',
        dialogFormVisible: false,
        dialogImageUrl: ''
      }
    },
    methods: {
      onUserList(tab) {
        console.log('---3232323232', tab, this.stateNum)
        var tap = tab === 1 ? 'first' : tab.name
        console.log('---==========================', tap)
        var n = this.stateNum + 1
        var list = [{
          name: n,
          shopId: 2,
          img: '../static/img/img.jpg',
          nnn: '02003049958775',
          time: '2020-03-02 15:00:00',
          phone: '18611977964'
        }]
        this.users = list
        this.stateNum = n
        this.total = list.length
      },
      handleCurrentChange(val) {
        this.page = val
        this.onUserList()
      }
    },
    mounted() {
      this.onUserList(1)
    }
  }
</script>
<style>
  .message-title {
    cursor: pointer;
  }

  .handle-row {
    margin-top: 30px;
  }
 .el-select .el-input {
    width: 200px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
